/* eslint-disable array-callback-return */
import React from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Spin, Button } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import queryString from 'query-string';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';

const { Description } = DescriptionList;
@connect(({ login, singlemanage, loading }) => ({
  login,
  singlemanage,
  loading: loading.models.singlemanage,
  accuUpdateData: singlemanage.accuUpdateData, // 公积金详情数据
}))
@Form.create()
class ClientInfoDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userType: 1,
    };
  }

  componentDidMount() {
    const {
      login: { systemList },
      location,
    } = this.props;
    const custAccuAccoId = queryString.parse(location.search).baseInfoId;
    let userType;
    systemList.map(item => {
      if (item.isSelected) {
        userType = item.sysCode;
      }
    });
    this.setState({ userType });
    // 获取公积金详情数据
    this.getAccuDetail(custAccuAccoId);
  }

  // 获取公积金详情数据
  getAccuDetail(custAccuAccoId) {
    const { dispatch } = this.props;
    dispatch({
      type: 'singlemanage/getAccuDetail',
      payload: {
        custAccuAccoId,
      },
    });
  }

  render() {
    const {
      loading,
      singlemanage: { accuUpdateData },
    } = this.props;
    const { userType } = this.state;
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <Card title="公积金账户详情">
            <DescriptionList>
              <Description term="客户名称 ">{accuUpdateData.custName || '--'}</Description>
              <Description term="公积金账户名称 ">{accuUpdateData.accoName || '--'}</Description>
              <Description term="统一社会信用代码">
                {accuUpdateData.uniCreditCode || '--'}
              </Description>
              <Description term="地区">{accuUpdateData.areaName || '--'}</Description>
              <Description term="单位名称">{accuUpdateData.orgName || '--'}</Description>
              <Description term="所属公积金机构">{accuUpdateData.accuOrg || '--'}</Description>
              <Description term="支付方式">{accuUpdateData.payWayName || '--'}</Description>
              <Description term="是否可突破上限">
                {accuUpdateData.exceedCeilingFlagName || '--'}
              </Description>
              <Description term="银行账户信息">{accuUpdateData.custBankAcc || '--'}</Description>
              <Description term="是否开户完成">{accuUpdateData.doneFlagName || '--'}</Description>
              <Description term="公积金组合">{accuUpdateData.accuPkgName || '--'}</Description>
              {userType === 4 && (
                <Description term="申报负责人">{accuUpdateData.respNameList || '--'}</Description>
              )}
              <Description term="备注">{accuUpdateData.remark || '--'}</Description>
              <Description term="创建人">{accuUpdateData.creName || '--'}</Description>
              <Description term="创建时间">{moment(accuUpdateData.creTime).format('YYYY-MM-DD HH:mm') || '--'}</Description>
            </DescriptionList>
          </Card>
          <FooterToolbar style={{ width: '100%' }}>
            <Button onClick={() => router.goBack()}>返回</Button>
          </FooterToolbar>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}
export default ClientInfoDetails;
